<script setup lang="ts">
import { onMounted } from 'vue'

import apis from '@/apis'
import { systemStore } from '@/stores/modules/system'

import type { ContactState } from '../types/common'
const useSystemStore = systemStore()
useStickyChange('.anchor-bar', fixed => {
  const elClassList = document.querySelector('.website-header')?.classList
  if (fixed) {
    elClassList?.add?.('is-hidden')
  } else {
    elClassList?.remove?.('is-hidden')
  }
})
const icp = ref('')
const contactState = ref<Partial<ContactState>>({})
const telegramFirst = ref('')
const skypeFirst = ref('')
const getSupportData = () => {
  apis.user.support().then(res => {
    contactState.value = {
      phone: res.data?.phone || [],
      qq: res.data?.QQ || [],
      email: res.data?.email || [],
      telegram: res.data?.telegram || [],
      skype: res.data?.skype || []
    }
    icp.value = res.data?.icp || ''
    if (contactState.value?.telegram?.length) {
      telegramFirst.value = contactState.value?.telegram[0]
    }
    if (contactState.value?.skype?.length) {
      skypeFirst.value = contactState.value?.skype[0]
    }
  })
}
onMounted(() => {
  getSupportData()
  useSystemStore.getSignData()
})
</script>

<template>
  <header-bar></header-bar>
  <banner-bar></banner-bar>
  <main-part></main-part>
  <footer-slogan></footer-slogan>
  <footer-bar
    :telegramFirst="telegramFirst"
    :skypeFirst="skypeFirst"
    :icp="icp"
  ></footer-bar>
  <contact-float :contact-state="contactState"></contact-float>
</template>
